<template>
	<view>
		<uni-nav-bar title="收货地址编辑" left-icon="back" fixed="true" color="#353535" backgroundColor="#fff" @clickLeft="goback"></uni-nav-bar>
		<view class="add-address">
			<view class="add-form">
				<view class="form-item">
					<view class="input_title">收货人</view>
					<input class="input" @input="bindinputName" placeholder="请输入收货人姓名" :value="order.receiverName" auto-focus></input>
				</view>
				<view class="form-item">
					<view class="input_title">手机号码</view>
					<input class="input" @input="bindinputMobile" :value="order.receiverPhone" placeholder="请输入收货人手机号码"></input>
				</view>
				<view class="form-item">
					<view class="input_title">所在地区</view>
					<input class="input" :value="order.receiverProvince+order.receiverCity+order.receiverRegion" disabled="true" @tap="translate"
					 placeholder="请选择"></input>
					<image class="address_img" src="/static/static/images/address_right.png"></image>
				</view>
				<view class="form-item address_more">
					<view class="input_title">详细地址</view>
					<input class="input" @input="bindinputAddress" :value="order.receiverDetailAddress" placeholder="请输入街道门牌信息"></input>
				</view>
				<!-- <view class="form-default">
					<text class="defalt-text">设置为默认地址</text>
					<image @tap.stop="bindIsDefault" v-if="address.defaultStatus == 0" class="default-img" src="/static/static/images/check.png"></image>
					<image @tap.stop="bindIsDefault" v-if="address.defaultStatus == 1" class="default-img" src="/static/static/images/checked.png"></image>
				</view> -->
				<view class="btns">
					<button class="save" @tap="saveAddress">保存</button>
				</view>
			</view>
		</view>
		<linkAddress ref="linkAddress" :height="height" @confirmCallback="confirmCallback"></linkAddress>
	</view>
</template>

<script>

import util from '../../../utils/util.js';
import api from '../../../config/api.js';
import linkAddress from '../../../components/area/xuan-linkAddress.vue'
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
var app = getApp();

export default {
  data() {
    return {
	  height: '550rpx',
      order: {
        id: 0,
        receiverName: '',
        receiverPhone: '',
        receiverProvince: '',
        receiverCity: '',
        receiverRegion: '',
        receiverDetailAddress: '',
        note: ''
      }
    };
  },

  components: {linkAddress,uniNavBar},
  props: {},
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
	console.log("==options.order=="+options.order)
   if (options) {
	   this.order.id = options.order;
		// this.order.id = options.order.id
		// this.order.id = JSON.parse(options.order.id)
		// this.order.receiverName = options.order.receiverName
  //       this.order.receiverPhone = options.order.receiverPhone
  //       this.order.receiverProvince = options.order.receiverProvince
  //       this.order.receiverCity = options.order. receiverCity
  //       this.order.receiverRegion = options.order.receiverRegion
  //       this.order.receiverDetailAddress = options.order.receiverDetailAddress
  //     this.setData({
		// //order: options.order
  //     })
     }
  },
 onShow() {
 	this.getAddressDetail()
 },
  methods: {
	  goback(){
		  uni.navigateBack()
	  },
	getAddressDetail(){
		let order = this.order;
		util.request(api.OrderDetail, {
		  orderId: order.id,
		}).then(function(res){
			console.log(JSON.stringify(res))
			order.receiverName = res.data.receiverName;
			order.receiverPhone = res.data.receiverPhone;
			order.receiverProvince = res.data.receiverProvince;
			order.receiverCity = res.data.receiverCity;
			order.receiverRegion = res.data.receiverRegion;
			order.detailAddress = res.data.detailAddress;
			order.receiverDetailAddress = res.data.receiverDetailAddress;
	
		});
	},
    bindinputMobile(event) {
      let order = this.order;
      order.receiverPhone = event.detail.value;
      this.setData({
        order: order
      });
    },

    bindinputName(event) {
      let order = this.order;
      order.receiverName = event.detail.value;
      this.setData({
        order: order
      });
    },

    bindinputAddress(event) {
      let order = this.order;
      order.detailAddress = event.detail.value;
      this.setData({
        order: order
      });
    },
	//点击选择城市按钮显示picker-view
	translate: function(e) {
		this.height = '550rpx';
		//显示
		this.$refs.linkAddress.show();
	},
	confirmCallback: function(data) {
		// console.log("confirmCallback"+JSON.stringify(data))
		// let order = this.order; // let selectRegionList = this.data.selectRegionList;
		this.order.receiverProvince = data.province.name;
		this.order.receiverCity = data.city.name;
		this.order.receiverRegion = data.district.name;
		// this.setData({
		// 	order: order
		// });
	},
	
	//

    //点击选择城市按钮显示picker-view
    // translate: function (e) {
    //   area.animationEvents(this, 0, true, 400);
    // },
    //隐藏picker-view
    // hiddenFloatView: function (e) {
    //   console.log("id = " + e.target.dataset.id);
    //   area.animationEvents(this, 200, false, 400); //点击确定按钮更新数据(id=444是背后透明蒙版 id=555是取消按钮)

    //   if (e.target.dataset.id == 666) {
    //     this.updateShowData();
    //   }
    // },
    //滑动事件
    // bindChange: function (e) {
    //   area.updateAreaData(this, 1, e); //如果想滑动的时候不实时更新，只点确定的时候更新，注释掉下面这行代码即可。
    //   // this.updateShowData()
    // },
    //更新顶部展示的数据
    // updateShowData: function (e) {
    //   item = this.item;
    //   let order = this.order;
    //   order.receiverProvince = item.provinces[item.value[0]].name;
    //   order.receiverCity = item.citys[item.value[1]].name;
    //   order.receiverRegion = item.countys[item.value[2]].name;
    //   this.setData({
    //     order: order
    //   });
    // },

    cancelAddress() {
      uni.reLaunch({
        url: '/pages/ucenter/order/order'
      });
    },

    saveAddress() {
      console.log(this.order);
      let order = this.order;

      if (order.receiverName == '') {
        util.showErrorToast('请输入姓名');
        return false;
      }

      if (order.receiverPhone == '') {
        util.showErrorToast('请输入手机号码');
        return false;
      }

      if (order.receiverRegion == '') {
        util.showErrorToast('请输入省市区');
        return false;
      }

      if (order.receiverDetailAddress == '') {
        util.showErrorToast('请输入详细地址');
        return false;
      }

      let that = this;
      util.request(api.OrderAddressUpdate, {
        id: order.id,
        receiverName: order.receiverName,
        receiverPhone: order.receiverPhone,
        receiverProvince: order.receiverProvince,
        receiverCity: order.receiverCity,
        receiverRegion: order.receiverRegion,
        detailAddress: order.detailAddress,
        defaultStatus: order.defaultStatus
      }, 'POST').then(function (res) {
        if (res.errno == 0) {
          uni.reLaunch({
            url: '/pages/ucenter/order/order'
          });
        }
      });
    }

  }
};
</script>
<style>


page {
		position: relative;
		height: 100%;
		background: #fff;
	}

	.add-address {
		background: #f1f1f1;
		height: 100%;
	}

	.add-address .add-form {
		/* position: absolute; */
		margin-top: 20rpx;
		background: #fff;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.add-address .form-item {
		height: 100rpx;
		padding-left: 30rpx;
		border-bottom: 1px solid #d9d9d9;
		display: flex;
		align-items: center;
		padding-right: 30rpx;
		font-size: 28rpx;
	}

	.add-address .input_title {
		width: 142rpx;
	}

	.add-address .address_img {
		height: 28rpx;
		width: 28rpx;
	}

	.add-address .input {
		flex: 1;
		overflow: hidden;
	}

	.add-address .address_more {
		height: 140rpx;
		padding-top: 36rpx;
		padding-bottom: 76rpx;
	}

	.add-address .form-default {
		display: flex;
		justify-content: space-between;
		height: 120rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
		padding-left: 30rpx;
		border-top: 20rpx solid #f1f1f1;
	}

	.default-img {
		margin-top: 35rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.default-input {
		width: 28rpx;
		height: 100rpx;
		padding-left: 0rpx;
		line-height: 100rpx;
		background-size: 28rpx 28rpx;
		font-size: 28rpx;
	}

	.default-input.selected {
		background-size: 28rpx 28rpx;
	}

	.add-address .btns {
		background-color: #f1f1f1;
		bottom: 0;
		left: 0;
		overflow: hidden;
		display: flex;
		width: 100%;
		height: 60%;
	}

	.add-address .save {
		margin-top: 80rpx;
		height: 80rpx;
		width: 640rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #fff;
		border: none;
		border-radius: 40rpx;
	}


	.add-address .save {
		background: #b28850;
	}
</style>